<template>
  <div>
    <h1>hello vue</h1>
    <button @click="btn">点我</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 123
    }
  },
  methods: {
    btn(){
      // this指向当前vue组件实例对象
      console.log(this);
      // this.a;
      // this.$emit("自定义事件",1)
      // setTimeout(function(){
        // 指向window，因为回调函数是由setTimeout调用，
        // 而setTimeout是window的方法，因此指向window
        //   console.log(this); 
      // }, 1000);
      // 如果要在定时器里面使用this并且要求指向vue组件对象，如何做？
      // 方法一：可以在定时器外面先把this保存起来即可，代码如下：
      // let that = this;
      // setTimeout(function() {
      //   console.log(that);
      // }, 100);
      // 方法二：定时器里面使用箭头函数
      setTimeout(() => {
        // 箭头自身是没有this，但是我们通常也会在箭头函数中使用this，那么此刻
        // this指向的是当前的代码的执行环境，也就setTimeout是在btn这个函数中执行的
        // 因此箭头函数的this就指向btn函数的this，btn函数的this我们都知道是指向vue组件对象的
        // 从而箭头函数中的this也就指向vue组件对象了。
        console.log(this); // vue组件对象
      }, 100);
    }
  }
}
</script>

<style>

</style>